<template>
    <div>
        <el-dialog :title="form.name + '小程序用户'" width="60%" :show-close="false" :visible.sync="dialogUserProgramVisible"
            :close-on-click-modal="false" style="height: 100%;" custom-class="customclassdialog">
            <el-button type="primary" class="ch_button mb15" v-repeatStop="{ func: add, delay: '2000' }">
                <i class="el-icon-plus"></i>
                <div>添加用户</div>
            </el-button>
            <el-table :data="tableData" border style="width: 100%;" height="400px" v-loading="loading"
                element-loading-text="Loading..." element-loading-spinner="el-icon-loading">
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column label="名称" min-width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.nickname }}
                    </template>
                </el-table-column>
                <el-table-column label="账号" min-width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.mobile }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="角色" min-width="80" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.powerstationname }}
                        </template>
                    </el-table-column> -->
                <!-- <el-table-column label="联系电话" min-width="80" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.powerstationname }}
                        </template>
                    </el-table-column> -->
                <el-table-column label="创建时间" min-width="100" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.created_at }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <div class="operation_box">
                            <el-button @click.native.prevent="editRow(scope.row)" type="text" class="operation_edit"
                                size="mini">
                                编辑
                            </el-button>
                            <!-- <el-button @click.native.prevent="ToggleRow(scope.row)"  round
                                :class="scope.row.status == 0 ? 'operation_operation' : 'operation_delete'" size="mini">{{
                                scope.row.status==0?'正常':'禁用' }}</el-button> -->
                            <el-switch @click.native.prevent="ToggleRow(scope.row)"
                                :value="scope.row.status == 0 ? true : false" class="main-el-switch" :width="60" active-color="#13ce66" active-text="开启" inactive-text="禁用" inactive-color="#ff4949">
                            </el-switch>
                            <!-- <el-button @click.native.prevent="deleteRow(scope.row)" type="text" class="operation_delete" size="mini">
                删除
              </el-button> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationblock" v-if="tableData.length > 0" style="position: static;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.limit"
                    :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>

            <el-dialog width="45%" :title="userform.id ? '编辑用户' : '添加用户'" :visible.sync="addinnerVisible" append-to-body
                custom-class="customclassdialog">
                <el-form :model="userform" style="width: 100%;">
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-form-item label="名称:" :label-width="formLabelWidth">
                                <screenSelect title="" type='input' v-model="userform.nickname"
                                    :isValue='userform.nickname' placeholder="请输入"
                                    @transfer="valueHeld($event, 'nickname')" width='100%' position="top"
                                    :isBorder="untenFun(userform.nickname)" />
                                <div class="unten" v-if="untenFun(userform.nickname)">请输入名称</div>
                            </el-form-item>
                            <el-form-item label="账号:" :label-width="formLabelWidth">
                                <screenSelect title="" type='input' v-model="userform.mobile" :isValue='userform.mobile'
                                    placeholder="请输入" @transfer="valueHeld($event, 'mobile')" width='100%'
                                    position="top" :isBorder="untenFun(userform.mobile)" />
                                <div class="unten" v-if="untenFun(userform.mobile)">请输入账号</div>
                            </el-form-item>
                            <el-form-item label="密码:" :label-width="formLabelWidth">
                                <div v-if="userform.id">
                                    <screenSelect title="" type='input' v-model="userform.password"
                                        :isValue='userform.password' placeholder="请输入"
                                        @transfer="valueHeld($event, 'password')" width='100%' position="top" />
                                </div>
                                <div v-else>
                                    <screenSelect title="" type='input' v-model="userform.password"
                                        :isValue='userform.password' placeholder="请输入"
                                        @transfer="valueHeld($event, 'password')" width='100%' position="top"
                                        :isBorder="untenFun(userform.password)" />
                                    <div class="unten" v-if="untenFun(userform.password)">请输入密码</div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-loading="loadingtree" element-loading-text="Loading..."
                            element-loading-spinner="el-icon-loading" style="overflow-y: auto;"
                            :style="'max-height:' + windowHeight / 2 + 'px;'">
                            <el-tree ref="treeuserrole" :props="propsda" default-expand-all :data="roleData"
                                node-key="id" show-checkbox>
                            </el-tree>
                        </el-col>
                    </el-row>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button v-repeatStop="{ func: usercancel, delay: '2000' }">关 闭</el-button>
                    <el-button type="primary" v-repeatStop="{ func: usersave, delay: '2000' }">提 交</el-button>
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button v-repeatStop="{ func: programcancel, delay: '2000' }">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import { getprogramList, addprogramuser, editprogramuser, userroleprogramuser, toggleprogramuser } from "@/api/enterpriseinfo.js"
export default {
    name: 'WorkspaceJsonAddsuserProgram',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        dialogUserProgramVisible: {
            type: Boolean
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        },
    },
    data() {
        return {
            formLabelWidth: '100px',
            loadingtree: true,
            form: {},
            userform: {},
            windowHeight: 0,
            pageData: {
                page: 1,
                limit: 10
            },
            propsda: {
                label: 'name',
                children: 'child'
            },
            roleData: [],
            total: 0,
            tableData: [],
            loading: true,
            addinnerVisible: false,
            isUnten: false

        };
    },
    mounted() {
        this.windowHeight = document.body.clientHeight;
        if (this.dialogUserProgramVisible) {
            this.getList()
        }
    },
    methods: {
        untenFun(data) {
            if (this.isUnten) {
                if (data == undefined) {
                    return true
                } else {
                    if (data == '' && data != '0') {
                        return true
                    } else {
                        return false
                    }
                }
            } else {
                return false
            }

        },
        valueHeld(childParam, fatherparam) {
            this.isUnten = false
            this.userform[fatherparam] = childParam
        },
        add() {
            this.addinnerVisible = true
            this.isUnten = false
            this.userform = {
                admin_id: this.form.id
            }
            this.getuserRole()
        },
        editRow(row) {
            this.userform = JSON.parse(JSON.stringify(row))
            console.log(this.userform);
            this.getuserRole()
            this.addinnerVisible = true
        },
        ToggleRow(row) {
            let that = this
            this.userform = JSON.parse(JSON.stringify(row))
            console.log(this.userform.status);
            let data = {}
            data.id = this.userform.id
            data.type = !this.userform.status
            this.$confirm('确定执行此操作？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(() => {

                    toggleprogramuser(data).then(res => {
                        if (res.code == 200) {
                            that.getList()
                            that.$modal.msgSuccess(res.message)
                        } else {
                            that.$modal.msgError(res.message)
                        }

                    })
                })
                .catch(action => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    })
                });
        },
        usercancel() {
            this.addinnerVisible = false
        },
        usersave() {
            let that = this
            this.isUnten = true
            console.log(that.userform);
            if (that.userform.id) {
                for (let key in that.userform) {
                    console.log(key);
                    if (key == 'mobile' || key == 'admin_id')
                        if (that.userform[key] === '' || that.userform[key] === undefined) {
                            return false
                        }
                }
            } else {
                for (let key in that.userform) {
                    console.log(key);
                    if (key == 'mobile' || key == 'password' || key == 'admin_id')
                        if (that.userform[key] === '' || that.userform[key] === undefined) {
                            return false
                        }
                }
            }

            let t = JSON.parse(JSON.stringify(that.$refs.treeuserrole.getCheckedNodes().concat(that.$refs.treeuserrole.getHalfCheckedNodes())))
            let arrA = []
            let arrB = []
            t.map(item => {
                if (item.child.length!=0) {
                    item.child = []
                    delete item.created_at
                    delete item.updated_at
                    arrA.push(item)
                } else {
                    delete item.created_at
                    delete item.updated_at
                    arrB.push(item)
                }
            })
            arrB.map(item => {
                arrA.map(v => {
                    if (item.pid == v.id) {
                        v.child.push(item)
                    }
                })
            })
            arrA.map(item => {
                delete item.pid
                if (item.child.length!=0) {
                    item.child.map(v => {
                        delete v.pid
                    })
                }
            })
            that.userform.role = arrA
            if (that.userform.id) {
                editprogramuser(that.userform).then(res => {
                    if (res.code == 200) {
                        that.$modal.msgSuccess(res.message)
                        that.getList()
                        that.addinnerVisible = false
                    } else {
                        that.$modal.msgError(res.message)
                    }
                })
            } else {
                addprogramuser(that.userform).then(res => {
                    if (res.code == 200) {
                        that.$modal.msgSuccess(res.message)
                        that.getList()
                        that.addinnerVisible = false
                    } else {
                        that.$modal.msgError(res.message)
                    }
                })
            }

        },
        getuserRole() {
            let that = this
            userroleprogramuser().then(res => {
                if (res.code == 200) {
                    console.log(res.data,'数据');
                    that.roleData = res.data
                    setTimeout(() => {
                        that.checkedidsHeld(res.data).map(i => {
                            let node = that.$refs.treeuserrole.getNode(i);
                            if (node && node.isLeaf) {
                                that.$refs.treeuserrole.setChecked(node, true)
                            }
                        })
                    }, 100);
                    that.loadingtree = false
                }
            })
        },
        checkedidsHeld(data) {
            data.map(item => {
                item.checked = 'false'
                if (item.child.length!=0) {
                    item.child.map(v => {
                        v.checked = 'false'
                    })
                }
            })
            let arr = []
            if (this.userform.roleArr != undefined) {
                let role = this.userform.roleArr
                let roleid = []
                role.map(item => {
                    roleid.push(item.id)
                    if (item.child.length!=0) {
                        item.child.map(v => {
                            roleid.push(v.id)
                        })
                    }
                })
                console.log(roleid);
                data.map(item => {
                    if (roleid.indexOf(item.id) > -1) {
                        item.checked = 'true'
                    }
                    if (item.child.length!=0) {
                        item.child.map(v => {
                            if (roleid.indexOf(v.id) > -1) {
                                v.checked = 'true'
                            }
                        })
                    }
                })
                data.map(item => {
                    if (item.checked == 'true') {
                        arr.push(item.id)
                    }
                    if (item.child || item.child.length > 0) {
                        item.child.map(v => {
                            if (v.checked == 'true') {
                                arr.push(v.id)
                            }
                        })
                    }
                })
            }
            return arr
        },
        getList() {
            let that = this
            console.log(that.form);
            let data = that.pageData
            data.admin_id = that.form.id
            getprogramList(data).then(res => {
                if (res.code == 200) {
                    that.tableData = res.data.rows
                    that.total = res.data.count
                    that.loading = false
                }
            })
        },
        programcancel() {
            let e = {}
            e.dialogUserProgramVisible = false
            e.form = this.form
            this.$emit('programcancel', e);
        },
        handleSizeChange(val) {
            this.pageData.limit = val
        },
        handleCurrentChange(val) {
            this.pageData.page = val
        },

    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from {
//         opacity: 0;
//         transform: translateY(-100%);
//     }

//     to {
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }

// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
}

.editHeld_conter_left .avatar {
    width: 180px;
    height: 180px;
    display: block;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
    }
}
::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {
    position: relative;
    .el-switch__core {
      height: 24px;
      border-radius: 12px;
      &:after {
        left: 4px;
        top: 3px;
      }
    }
    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            margin-left: -20px;
            left: 100%;
          }
        }
      }
    }
    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }
      .el-switch__label--right {
        opacity: 1;
      }
    }
    .el-switch__label {
      position: absolute;
      top: 0;
    }
    .el-switch__label--left {
      right: 0;
      color: #fff;
      z-index: 1;
      margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      margin-left: 8px;
    }
  }
}
</style>